<template>
  <div>
    <div class="head">
      我的地址
      <span class="arrow" @click="Jump_path">
        <img src="../../public/assets/images/zjt.png" />
      </span>

      <!-- 地址 -->
      <div class="item">
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          @add="onAdd"
          @edit="onEdit"
          @select="onselect"
        />
        <!-- 弹出层 -->

        <van-popup
          v-model="show"
          round
          position="bottom"
          :style="{ height: '70%' }"
        >
          <van-address-edit
            :area-list="areaList"
            show-delete
            :address-info="addresslist"
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      show: false,
      areaList,
      searchResult: [],
      chosenAddressId: "1",
      reasobj: {},
      addresslist: {}, //初始值
      spid: 0,
      ztm: 0, //状态码
      listindex: 0, //修改下标
      rlist: [], //收货地址
      list: [],//收货人信息数组
    };
  },
  methods: {
    onAdd() {
      this.ztm = 1;
      //   this.$toast('新增地址');
      this.show = true;
    },
    //点击修改
    onEdit(item, index) {
      this.ztm = 2;
      this.listindex = index;
      this.addresslist = item;
      console.log(item);
      this.show = true;
    },
    //切换
    onselect(item) {
      this.rlist = [];
      this.rlist.push(item);
    },
    //跳转
    Jump_path() {
      this.$router.go(-1);
    },
    //弹出
    showPopup() {
      this.show = true;
    },
    //点击保存触发，添加地址
    onSave(content) {
      if (this.ztm == 1) {
        this.addresslist = {};
        this.spid = new Date().getTime();
        console.log(content);
        this.reasobj.address =
          content.city +
          content.province +
          content.county +
          content.addressDetail;
        this.reasobj.city = content.city;
        this.reasobj.province = content.province;
        this.reasobj.county = content.county;
        this.reasobj.addressDetail = content.addressDetail;
        this.reasobj.isDefault = content.isDefault;
        this.reasobj.id = this.spid;
        this.reasobj.name = content.name;
        this.reasobj.areaCode = content.areaCode;
        this.reasobj.tel = content.tel;
        console.log(this.reasobj);
        this.chosenAddressId = this.spid;
        this.rlist = [];
        this.rlist.push(this.reasobj);
        this.list.push(this.reasobj);
      } else {
        console.log("修改");
        this.list[this.listindex] = content;
        this.rlist = [];
        this.rlist.push(content);
      }
      this.addresslist = {};
      this.show = false;
    },
    //点击删除触发
    onDelete() {
      if (this.ztm == 1) {
        this.addresslist = {};
      } else {
        this.list.splice(this.listindex, 1);
        this.addresslist = {};
        this.show = false;
      }
    },
  },
  created() {
    // 地址存储
    if (window.localStorage.getItem("resslist") == null) {
      window.localStorage.setItem("resslist", "[]");
    }
    let resslist = window.localStorage.getItem("resslist");
    resslist = JSON.parse(resslist);
    this.list = resslist;
    //收货地址存储
    if (window.localStorage.getItem("Receiptlist") == null) {
      window.localStorage.setItem("Receiptlist", "[]");
    }
    let Receiptlist = window.localStorage.getItem("Receiptlist");
    Receiptlist = JSON.parse(Receiptlist);
    this.rlist = Receiptlist;
    if (this.rlist.length != 0) {
      this.chosenAddressId = this.rlist[0].id;
    }
  },
  beforeDestroy() {
    // 地址存储
    let resslist = this.list;
    resslist = JSON.stringify(resslist);
    window.localStorage.setItem("resslist", resslist);
    //收货地址存储
    let rlist = this.rlist;
    rlist = JSON.stringify(rlist);
    window.localStorage.setItem("Receiptlist", rlist);
  },
};
</script>
<style scoped>
.head {
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  color: #fff;
  background-color: rgb(27, 36, 45);
  z-index: 999;
}
.arrow {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 999;
}
.arrow img {
  width: 100%;
  height: 100%;
}
.foot {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0px;
  left: 0px;
}
</style>